<template>
	<view class="content">
		<view class="cul-wrapper">
			<view v-if="isOver" class="msg-over">没有更多消息了</view>
			<block v-for="(item,index) in hisMsgs" :key="item.id">
				<view :class="[item.isme?'msg-me':'msg-service']" :id="item.id">
					<view class="msg-text">
						<view class="msg-text-content">
							<text>{{item.msg}}</text>
						</view>
					</view>
				</view>
			</block>
			<view class="cul-date">{{curDate | formatDate}}</view>
			<block>
				<view class="msg-service">
					<view class="msg-text">
						<view class="msg-text-content">
							<view class="msg-introduce">您好，请先选择问题分类，我将为您解答。</view>
							<view class="msg-classify">
								<view class="msg-classify-tit"><text class="msg-classify-name">分类1：</text>关于收费。</view>
								<view class="msg-classify-click" @click="consultClick(1)">[此类问题请点我]</view>
							</view>
							<view class="msg-introduce">您好，请先选择问题分类，我将为您解答。</view>
							<view class="msg-classify">
								<view class="msg-classify-tit"><text
										class="msg-classify-name">分类2：</text>关于收费。</view>
								<view class="msg-classify-click" @click="consultClick(2)">[此类问题请点我]</view>
							</view>
							<view class="msg-introduce">您好，请先选择问题分类，我将为您解答。</view>
							<view class="msg-classify">
								<view class="msg-classify-tit"><text
										class="msg-classify-name">分类3：</text>关于收费。</view>
								<view class="msg-classify-click" @click="consultClick(3)">[此类问题请点我]</view>
							</view>
						</view>
					</view>
				</view>
			</block>
			<block v-for="(item,index) in msgs" :key="index">
				<view :class="[item.isme?'msg-me':'msg-service']" :id="'msg-'+index">
					<view class="msg-text">
						<view class="msg-text-content">
							<text>{{item.msg}}</text>
						</view>
					</view>
				</view>
			</block>
		</view>
		<view class="operation" :class="{'conversion':!conversion}">
			<input class="uni-input" type="text" v-model="msgInput.msg1" :class="[conversion?'msg-input1':'msg-input2']"
				@tap="sub1(msgInput.msg2)" />
			<input type="text" v-model="msgInput.msg2" :class="[conversion?'msg-input2':'msg-input1']"
				@tap="sub2(msgInput.msg1)" />
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				indexRegion: '',
				listPage: 0,
				isOver: false,
				curDate: '1588061853944',
				//控制按钮和文本框样式和功能的转换
				conversion: true,
				msgInput: {
					msg1: '',
					msg2: ''
				},
				//消息列表
				msgs: [],
				hisMsgs: []
			}
		},
		onLoad(e) {
			this.indexRegion = uni.getStorageSync('indexReg');
			console.log(this.indexRegion)
		},
		filters: {
			formatDate: function(value) {
				let date = new Date();
				//date.setTime(value);
				let month = date.getMonth() + 1;
				let hours = date.getHours();
				if (hours < 10)
					hours = "0" + hours;
				let minutes = date.getMinutes();
				if (minutes < 10)
					minutes = "0" + minutes;
				let time = date.getFullYear() + "-" + month + "-" + date.getDate() +
					" " + hours + ":" + minutes;
				return time;
			}

		},
		// onBackPress() {
		// 	uni.setStorageSync('setStatusIndexFunc', 0);
		// 	// this.active = 0;
		// 	uni.navigateTo({
		// 		url: '../index/index?region=' + this.indexRegion
		// 	});
		// 	return true
		// },
		methods: {
			endOver() { //设置禁用下拉加载
				const pages = getCurrentPages();
				const page = pages[pages.length - 1];
				const currentWebview = page.$getAppWebview();
				currentWebview.setStyle({
					pullToRefresh: {
						support: false,
						style: plus.os.name === 'Android' ? 'circle' : 'default'
					}
				});
				// console.log('没有更多数据了，禁用');
			},
			consultClick(id) {
				console.log(id)
				this.sub(id)
			},
			//滚动到指定位置
			jumpScroll() {
				this.$nextTick(function() {
					uni.pageScrollTo({
						scrollTop: 99999,
						duration: 0
					});
				})
			},
			sendMsg(obj) {
				let anotherMsg = {
						isme: false,
						msg: '5元/h'
				}
			this.msgs.push(anotherMsg)
			this.jumpScroll()
		},
		sub1(val) {
			if (!this.conversion) {
				this.sub(val)
			}
		},
		sub2(val) {
			if (this.conversion) {
				this.sub(val)
			}
		},
		sub(val) {
			// console.log('222')
			console.log(val)
			let _self = this;
			if (val) {
				//清空输入框中的文字
				this.msgInput.msg1 = ''
				this.msgInput.msg2 = ''
				let msg = {
					isme: true,
					msg: val
				}
				this.msgs.push(msg)
				this.conversion = !this.conversion
				this.jumpScroll()
				setTimeout(() => {
					// console.log('x111')

				}, 50);
				this.sendMsg()
			} else {
				this.conversion = !this.conversion
				this.jumpScroll()
			}
		}
	},
	onPullDownRefresh() {
		let _this = this;
		console.log('refresh2');
		let msgArr = [{
				msg: '问题1',
				id: 'm1',
				mark: 'me',
				isme: true,
				time: '2021-5-1'
			},
			{
				msg: '回复1',
				id: 'l1',
				mark: 'service',
				isme: false,
				time: '2021-5-2'
			},
			{
				msg: '问题2',
				id: 'm2',
				mark: 'me',
				isme: true,
				time: '2021-5-1'
			},
			{
				msg: '回复2',
				id: 'l2',
				mark: 'service',
				isme: false,
				time: '2021-5-2'
			}
		]

		this.hisMsgs.push(...msgArr)
		console.log('this.hisMsgs1')
		console.log(this.hisMsgs)
		setTimeout(function() {
			uni.stopPullDownRefresh();
		}, 100);
	},
	}
</script>

<style>
	page {
		background-color: #EFEFEF;
	}

	.content {
		display: flex;
		flex-direction: column;
		align-items: center;
		flex: 1;
		margin-bottom: 120rpx;
	}

	.msg-over {
		font-size: 24rpx;
		text-align: center;
		color: #999999;
	}

	.cul-wrapper {
		padding: 0 35rpx;
		box-sizing: border-box;
	}

	.cul-date {
		padding-top: 20rpx;
		color: #999999;
		font-size: 24rpx;
		text-align: center;
	}

	.msg-me,
	.msg-service {
		display: flex;
		align-items: flex-start;
		width: 680rpx;
		margin: 30rpx 0;
		box-sizing: border-box;
		overflow: hidden;
	}

	/* .bg{
			background-color: blue;
		} */
	.msg-me {
		justify-content: flex-end;
	}

	.msg-service {
		justify-content: flex-start;
	}

	.avatar {
		width: 70rpx;
		height: 70rpx;
		border-radius: 50%;
	}

	.msg-text {
		width: 560rpx;
	}

	.msg-me>.msg-text {
		display: flex;
		justify-content: flex-end;
	}

	.msg-text-content {
		line-height: 35rpx;
		display: inline-block;
		box-sizing: border-box;
		padding: 30rpx;
		font-size: 28rpx;
	}

	.msg-introduce {
		color: #333333;
		font-size: 26rpx;
		line-height: 36rpx;
	}

	.msg-classify-tit {
		color: #333333;
		font-size: 26rpx;
		line-height: 43rpx;
	}

	.msg-classify-name {
		font-size: 30rpx;
		font-weight: bold;
	}

	.msg-classify-click {
		color: #2B8FFF;
		font-size: 26rpx;
		line-height: 56rpx;
	}

	.msg-me>.msg-text>.msg-text-content {
		margin-left: 70rpx;
		background-color: #2B8FFF;
		color: #FFFFFF;
		font-size: 30rpx;
		border-top-right-radius: 44rpx;
		border-bottom-left-radius: 44rpx;
		border-top-left-radius: 44rpx;
		margin-right: 15rpx;
	}

	.msg-service>.msg-text>.msg-text-content {
		color: #333333;
		margin-left: 15rpx;
		background-color: #FFFFFF;
		/* border: 1rpx solid #d5e0e5; */
		border-bottom-left-radius: 44rpx;
		border-bottom-right-radius: 44rpx;
		border-top-right-radius: 44rpx;
		/* 		margin-right: 70rpx; */
		color: #333333;
	}

	.operation {
		display: flex;
		position: fixed;
		left: 0;
		bottom: 0;
		align-items: center;
		/* background-color: transparent; */
		background: #EFEFEF;
		padding: 10px 35rpx;
		border-top: 1rpx solid rgba(184, 184, 184, 0.1);
		width: 100vw;
	}

	.conversion {
		flex-direction: row-reverse;
		justify-content: flex-end;
	}

	.msg-input1 {
		background: #FFFFFF;
		height: 40px;
		width: 520rpx;
		border-radius: 10px;
		padding: 0 20rpx;
		border: 1rpx solid rgba(0, 0, 0, 0.1);
	}

	.msg-input2 {
		display: flex;
		align-items: center;
		width: 140rpx;
		height: 40px;
		background-image: url('');
		background-repeat: no-repeat;
		background-position: center center;
		background-size: 47rpx 42rpx;
		/*这个颜色是因为组件位置交换的时候，字体会有一瞬间继续留在框内，这里把内容变为透明即可*/
		color: rgba(0, 0, 0, 0);
	}
</style>
